<template>
  <div>
    <el-descriptions title="基本信息" :border="true">
      <el-descriptions-item label="6S问题类型">{{
        formData.Info.TypeName
      }}</el-descriptions-item>
      <el-descriptions-item label="问题描述信息">{{
        formData.Info.Description
      }}</el-descriptions-item>
      <el-descriptions-item label="预计处理完成日期">{{
        formData.Info.ExpectTime
      }}</el-descriptions-item>
      <el-descriptions-item label="创建日期">{{
        formData.Info.CreateTime
      }}</el-descriptions-item>
      <el-descriptions-item label="创建人">{{
        $filterUserName(formData.Info.CreateUser)
      }}</el-descriptions-item>
      <el-descriptions-item label="状态">
        <el-tag :type="types[formData.Info.State]" effect="dark">{{
          status[formData.Info.State]
        }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="实际处理完成日期">{{
        formData.Info.RealTime
      }}</el-descriptions-item>
      <el-descriptions-item label="创建人附件">
        <FileUpload
          :showBtn="false"
          v-model:fileList="formData.Info.Files"
          :detail="true"
        ></FileUpload>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="场地信息" :border="true" class="mgt10">
      <el-descriptions-item label="场地名称">{{
        formData.Place.Name
      }}</el-descriptions-item>
      <el-descriptions-item label="场地负责人">{{
        $filterUserName(formData.Place.Principal)
      }}</el-descriptions-item>
      <el-descriptions-item label="区域名称">{{
        formData.Place.AreaName
      }}</el-descriptions-item>
      <el-descriptions-item label="区域类型">{{
        formData.Place.Type == 1 ? '教学场所' : '生活场所'
      }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{
        formData.Place.Remark
      }}</el-descriptions-item>
      <el-descriptions-item label="场地位置">{{
        formData.Place.Location
      }}</el-descriptions-item>
      <el-descriptions-item label="展示图片">
        <el-image
          style="width: 50px; height: 50px"
          :preview-src-list="[$addFileHead(formData.Place.ShowPicture)]"
          :src="$addFileHead(formData.Place.ShowPicture)"
          fit="fill"
        />
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions :column="1" title="6S执行项" :border="true" class="mgt10">
      <el-descriptions-item
        :label="'执行项' + (index + 1)"
        v-for="(item, index) in formData.Items"
      >
        <div class="flex jbetween acenter">
          <div class="content">{{ item.Content }}</div>
          <div class="icon flex">
            <el-icon v-if="item.State == 1" :size="24" color="#67C23A"
              ><CircleCheckFilled
            /></el-icon>
            <el-icon v-if="item.State == 2" :size="24" color="#F56C6C"
              ><CircleCloseFilled
            /></el-icon>
          </div>
        </div>
      </el-descriptions-item>
    </el-descriptions>
    <el-descriptions
      :title="formData.Info.State == 2 ? '正在处理过程信息' : '过程信息'"
      v-if="formData.Process&&formData.Process.Processor"
      :border="true"
      class="mgt10"
    >
      <template #extra>
        <el-button type="primary" @click="handleHistory">历史记录</el-button>
      </template>
      <el-descriptions-item label="处理人">{{
        $filterUserName(formData.Process.Processor)
      }}</el-descriptions-item>
      <el-descriptions-item label="处理方式">{{
        formData.Process.Mode
      }}</el-descriptions-item>
      <el-descriptions-item label="处理时间">{{
        formData.Process.CreateTime
      }}</el-descriptions-item>
      <el-descriptions-item label="创建人">{{
        $filterUserName(formData.Process.CreateUser)
      }}</el-descriptions-item>
      <el-descriptions-item label="驳回原因">{{
        formData.Process.BackReason
      }}</el-descriptions-item>
      <el-descriptions-item label="驳回时间">{{
        formData.Process.BackTime
      }}</el-descriptions-item>
      <el-descriptions-item label="驳回人">{{
        $filterUserName(formData.Process.BackUser)
      }}</el-descriptions-item>
      <el-descriptions-item label="处理人提交的附件">
        <FileUpload
          :showBtn="false"
          v-model:fileList="formData.Process.Process_FileList"
          :detail="true"
        ></FileUpload>
      </el-descriptions-item>
      <el-descriptions-item label="驳回人提交的附件">
        <FileUpload
          :showBtn="false"
          v-model:fileList="formData.Process.Back_FileList"
          :detail="true"
        ></FileUpload
      ></el-descriptions-item>
    </el-descriptions>
    <MyDialog
      v-model:show="showHistory"
      :title="showHistoryTitle"
      :showFooter="false"
    >
      <el-descriptions
        v-for="item in historyData"
        :title="item.CreateTime"
        :border="true"
        class="mgt10"
      >
        <el-descriptions-item label="处理人">{{
          $filterUserName(item.Processor)
        }}</el-descriptions-item>
        <el-descriptions-item label="处理方式">{{
          item.Mode
        }}</el-descriptions-item>
        <el-descriptions-item label="创建日期">{{
          item.CreateTime
        }}</el-descriptions-item>
        <el-descriptions-item label="发起人">{{
          $filterUserName(item.CreateUser)
        }}</el-descriptions-item>
        <el-descriptions-item label="驳回原因">{{
          item.BackReason
        }}</el-descriptions-item>
        <el-descriptions-item label="驳回时间">{{
          item.BackTime
        }}</el-descriptions-item>
        <el-descriptions-item label="驳回人">{{
          $filterUserName(item.BackUser)
        }}</el-descriptions-item>
        <el-descriptions-item label="处理人提交的附件">
          <FileUpload
            :showBtn="false"
            v-model:fileList="item.Process_FileList"
            :detail="true"
          ></FileUpload>
        </el-descriptions-item>
        <el-descriptions-item label="驳回人提交的附件">
          <FileUpload
            :showBtn="false"
            v-model:fileList="item.Back_FileList"
            :detail="true"
          ></FileUpload>
        </el-descriptions-item>
      </el-descriptions>
    </MyDialog>
  </div>
</template>

<script setup name="SixDetail">
import { computed } from 'vue';
import { GetSixSaleProcessLogList } from '@/api/sixManage/sixData.js';
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    default: {
      Info: {},
      Place: {},
      Items: {},
      Process: {}
    }
  }
});
const status = ref({
  1: '待处理',
  2: '待确认',
  3: '已完成'
});
const types = ref({
  1: 'danger',
  2: 'warning',
  3: 'success'
});
const showHistory = ref(false);
const showHistoryTitle = ref();
const formData = computed(() => props.modelValue);
const historyData = ref({});

onMounted(() => {
  console.log(formData.value);
});

async function handleHistory() {
  try {
    showHistoryTitle.value = '历史记录';
    let res = await GetSixSaleProcessLogList({ ID: formData.value.Info.ID });
    historyData.value = res.data;
    if (historyData.value?.length) {
      showHistory.value = true;
    } else {
      proxy.$modal.msgError('历史记录为空');
    }
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="scss" scoped></style>
